import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Tag } from 'antd';

const { CheckableTag } = Tag;

//const tagsData = ['Movies', 'Books', 'Music', 'Sports'];

class HotTags extends React.Component {
  state = {
    selectedTags: ['Books'],
  };

  handleChange(tag, checked) {
    const { selectedTags } = this.state;
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter((t) => t !== tag);
    console.log('You are interested in: ', nextSelectedTags);
    this.setState({ selectedTags: nextSelectedTags });
    this.props.handleChange(selectedTags);
  }
  
  

  render() {
    const { selectedTags } = this.state;
    return (
      <>
         {/* <span style={{ marginRight: 8 }}>组件类型:</span> */}
        {this.props.tagsData.map((tag) => (
          <CheckableTag
            key={tag.id}
            checked={selectedTags.indexOf(tag.name) > -1}
            onChange={(checked) => this.handleChange(tag.name, checked)}
          >
            {tag.name}
          </CheckableTag>
        ))}
      </>
    );
  }
}

export default HotTags;
